<html>
<head> 
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
    <title>流量脉冲计算</title> 

<script>
	function toRound(value){
		var value2;
		if (value > 1000){
			value2 = value.toFixed(0);
		}
		else if (value > 100){
			value2 = value.toFixed(1);
		}
		else if (value > 10){
			value2 = value.toFixed(2);
		}
		else if (value > 1){
			value2 = value.toFixed(3);
		}
		else{
			value2 = value.toFixed(4);
		}
		return value2
	}

	// 计算脉冲数
	function calcPulse(){
		// 获取参数
		var flow = document.getElementById('flow').value;
		var flow_unit = $('[name="flow_unit"]:checked').val();
		var equivalent = document.getElementById('equivalent').value;
		var equivalent_unit = $('[name="equivalent_unit"]:checked').val();
		var message = document.getElementById('message').innerHTML;

		if (flow == '' || equivalent == '') {
			message = '请输入流量值和当量值';
		}
		else{
			// 流量全部转换为m3/s
			switch (flow_unit) {
				case 'm3ph':
					flow = flow / 3600;
					break;
				case 'lpm':
					flow = flow / 1000 / 60;
					break;
				case 'lps':
					flow = flow / 1000;
					break;
			}
			// 脉冲当量全部转换为m3
			switch (equivalent_unit) {
				case 'm3':
					equivalent = equivalent;
					break;
				case 'l':
					equivalent = equivalent / 1000
					break;
			}
		}

		var pulse = flow / equivalent;

		document.getElementById('pulse').value = pulse.toFixed(1);
		document.getElementById('message').innerHTML = message;
	}

	// 计算流量
	function calcFlow(){
		// 获取参数
		var pulse = document.getElementById('pulse').value;
		var flow_unit = $('[name="flow_unit"]:checked').val();
		var equivalent = document.getElementById('equivalent').value;
		var equivalent_unit = $('[name="equivalent_unit"]:checked').val();
		var message = document.getElementById('message').innerHTML;
		var flow = ''

		if (pulse == '' || equivalent == '') {
			message = '请输入当量值和脉冲数';
		}
		else{
			// 脉冲当量全部转换为m3
			switch (equivalent_unit) {
				case 'm3':
					equivalent = equivalent;
					break;
				case 'l':
					equivalent = equivalent / 1000
					break;
			}
			flow = pulse * equivalent;

			// 流量全部转换为m3/s
			switch (flow_unit) {
				case 'm3ph':
					flow = flow * 3600;
					break;
				case 'lpm':
					flow = flow * 1000 * 60;
					break;
				case 'lps':
					flow = flow * 1000;
					break;
			}

			flow = flow.toFixed(3)
		}

		document.getElementById('flow').value = flow;
		document.getElementById('message').innerHTML = message;
	}
</script>
<style>
.ui-input{
  float:left;
  width: 100px; 
}
.ui-input>div{
    display: inline-block;
    line-height: 26px;
    height: 26px;
}

.ui-lable{
   float:left;
   line-height:26px; 
   width: 50px; 
}

.ui-lable.ui-lable-left{
   line-height:36px;	
}

.ui-unit{
   float:left;
   line-height:20px; 
}

</style>

</head>
<body>
    <div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1 id="header-device-detail">流量脉冲互换计算</h1>
			<a href="javascript:document.location='./flow.html'" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-back"></a>
		</div>

		<div data-role="main" class="ui-content">
		
		<form action="">
			<div class="ui-grid-a">
				<div class="ui-lable ui-lable-left">
				    <label><b>流量：</b></label>
			    </div>
				<div class="ui-input">
				    <input type="text" width="10px" name="flow" id="flow" data-mini="true" onchange="calcPulse()" value="35.0">
				</div>
				<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
					<label for="flow_m3ph">m<sup>3</sup>/h</label>
					<input type="radio" name="flow_unit" id="flow_m3ph" onchange="calcPulse()" value="m3ph" checked>
					<label class="ui-unit" for="flow_lpm"> L/m </label>
					<input type="radio" name="flow_unit" id="flow_lpm" onchange="calcPulse()" value="lpm">
					<label class="ui-unit" for="flow_lps"> L/s </label>
					<input type="radio" name="flow_unit" id="flow_lps" onchange="calcPulse()" value="lps">
				</fieldset>
			</div>

			<div class="ui-grid-a">
				<div class="ui-lable ui-lable-left">
				    <label><b>当量：</b></label>
			    </div>
				<div class="ui-input">
				    <input type="text" width="10px" name="equivalent" id="equivalent" data-mini="true" onchange="calcPulse()" value="0.01">
				</div>
			    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
					<label for="equivalent_m3">m<sup>3</sup></label>
					<input type="radio" name="equivalent_unit" id="equivalent_m3" onchange="calcPulse()" value="m3">
					<label class="ui-unit" for="equivalent_l"> L </label>
					<input type="radio" name="equivalent_unit" id="equivalent_l" onchange="calcPulse()" value="l" checked>
				</fieldset>
			</div>

			<li data-role="fieldcontain">
				<div class="ui-grid-a">
					<div class="ui-lable ui-lable-left">
					    <label><b>脉冲：</b></label>
				    </div>
					<div class="ui-input">
					    <input type="text" width="10px" name="pulse" id="pulse" data-mini="true" onchange="calcFlow()">
					</div>
					<div class="ui-lable">
					    <label >P/s</label>
				    </div>
				</div>
			</li>
		</form>
		<li data-role="fieldcontain">
			<div id="message">
				<p>* 输入流量值或当量值计算脉冲数</p>
				<p>* 输入脉冲数时计算流量</p>
			</div>
		</li>
	    </div>
	</div>
</body>
</html>